import { useEffect, useMemo, useRef, useState } from 'react'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { DecisionAPI } from '../app/api'
import useCurrentUser from '../app/hooks/useCurrentUser'
import type { ApiDecisionPreset, ApiDecisionSpinResult } from '../app/types'
import PageHeader from '../components/PageHeader'
import Button from '../components/ui/Button'

const COLOR_POOL = ['#60a5fa', '#a855f7', '#f472b6', '#facc15', '#34d399', '#38bdf8', '#fb7185', '#f97316', '#22d3ee', '#fbbf24']

const hexToRgb = (hex: string) => {
  if (!hex) return { r: 255, g: 255, b: 255 }
  const normalized = hex.replace('#', '')
  const expanded = normalized.length === 3 ? normalized.split('').map((c) => c + c).join('') : normalized.padStart(6, '0')
  const value = Number.parseInt(expanded, 16)
  if (Number.isNaN(value)) return { r: 255, g: 255, b: 255 }
  return {
    r: (value >> 16) & 255,
    g: (value >> 8) & 255,
    b: value & 255,
  }
}

const mixWithWhite = (hex: string, ratio: number) => {
  const clamp = (num: number) => Math.min(255, Math.max(0, Math.round(num)))
  const { r, g, b } = hexToRgb(hex)
  const mixed = {
    r: clamp(r + (255 - r) * ratio),
    g: clamp(g + (255 - g) * ratio),
    b: clamp(b + (255 - b) * ratio),
  }
  return `rgb(${mixed.r}, ${mixed.g}, ${mixed.b})`
}

const sanitizeOptions = (items: string[]): string[] => {
  const seen = new Set<string>()
  const cleaned: string[] = []
  items.forEach((raw) => {
    if (!raw) return
    const value = raw.trim()
    if (!value) return
    const key = value.toLowerCase()
    if (seen.has(key)) return
    seen.add(key)
    cleaned.push(value)
  })
  return cleaned
}

const buildGradient = (options: string[]): string => {
  if (options.length === 0) return 'transparent'
  const slice = 360 / options.length
  const segments = options
    .map((_, index) => {
      const base = COLOR_POOL[index % COLOR_POOL.length]
      const softened = mixWithWhite(base, 0.55)
      const highlight = mixWithWhite(base, 0.75)
      const start = slice * index
      const end = slice * (index + 1)
      return `${softened} ${start}deg ${end - 1.5}deg, ${highlight} ${end - 1.5}deg ${end}deg`
    })
    .join(', ')
  return `conic-gradient(from -90deg, ${segments})`
}

type WheelProps = {
  options: string[]
  rotation: number
  spinning: boolean
  highlightIndex: number | null
}

const WheelSpinner = ({ options, rotation, spinning, highlightIndex }: WheelProps) => {
  const gradient = useMemo(() => buildGradient(options), [options])
  const slice = options.length > 0 ? 360 / options.length : 0
  const OUTER_DIAM = 280
  const OUTER_R = OUTER_DIAM / 2
  const labelRadius = useMemo(() => {
    if (options.length <= 3) return OUTER_R - 18
    if (options.length <= 4) return OUTER_R - 22
    if (options.length <= 6) return OUTER_R - 28
    return OUTER_R - 36
  }, [options.length])

  return (
    <div className="relative flex h-[320px] w-[320px] items-center justify-center">
      <div
        className="relative flex h-[280px] w-[280px] items-center justify-center rounded-full border border-white/25 bg-white/20 shadow-[0_18px_48px_-24px_rgba(15,23,42,0.35)] ring-1 ring-white/40 backdrop-blur-xl overflow-hidden"
        style={{
          background: gradient,
          transform: `rotate(${rotation}deg)`,
          transition: spinning ? 'transform 3.2s cubic-bezier(0.25, 1, 0.3, 1)' : 'transform 0.6s ease-out',
          boxShadow: highlightIndex !== null ? '0 26px 70px -30px rgba(236,72,153,0.38)' : undefined,
        }}
      >
        {options.map((option, index) => {
          const centerAngle = slice * index + slice / 2 - 90
          const rad = (centerAngle * Math.PI) / 180
          const base = COLOR_POOL[index % COLOR_POOL.length]
          const labelBg = mixWithWhite(base, 0.8)
          const labelBorder = mixWithWhite(base, 0.6)
          const x = Math.cos(rad) * labelRadius
          const y = Math.sin(rad) * labelRadius
          return (
            <div
              key={option}
              className="absolute left-1/2 top-1/2"
              style={{ transform: `translate(-50%, -50%) translate(${x}px, ${y}px)` }}
            >
              <span
                className={`inline-flex items-center justify-center rounded-full ${
                  options.length > 6 ? 'px-2 py-[3px] text-[11px] min-w-[64px] max-w-[86px]' : 'px-3 py-1 text-xs min-w-[80px]'
                } font-semibold shadow-[0_12px_28px_-18px_rgba(15,23,42,0.45)] backdrop-blur-sm`}
                style={{
                  transform: `rotate(${-centerAngle}deg)`,
                  background: labelBg,
                  border: `1px solid ${labelBorder}`,
                  color: '#1f2937',
                  whiteSpace: 'nowrap',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                }}
              >
                {option}
              </span>
            </div>
          )
        })}

        <div className="absolute h-20 w-20 rounded-full bg-white/50 backdrop-blur-xl" />
      </div>
      {/* 固定在中心的指针与中心圆，不随转盘旋转 */}
      <div className="pointer-events-none absolute inset-0 z-30 flex items-center justify-center">
        {/* 中心圆 */}
        <div className="relative flex h-[88px] w-[88px] items-center justify-center rounded-full border border-white/40 bg-white/70 shadow-[0_10px_26px_-20px_rgba(15,23,42,0.45)] backdrop-blur-xl">
          {/* 指向上方的三角指针，长度覆盖到中心圆近顶部，保证“在中心圆圈里” */}
          <div
            className="absolute left-1/2 top-1/2 -translate-x-1/2"
            style={{ transform: 'translate(-50%, -36px)' }}
          >
            <div className="h-0 w-0 border-l-[8px] border-r-[8px] border-b-[28px] border-l-transparent border-r-transparent border-b-blush-400 drop-shadow" />
          </div>
        </div>
      </div>
    </div>
  )
}

type DiceBoardProps = {
  options: string[]
  activeIndex: number | null
  rollingIndex: number | null
}

const DiceBoard = ({ options, activeIndex, rollingIndex }: DiceBoardProps) => (
  <div className="grid w-full gap-3 sm:grid-cols-2 lg:grid-cols-3">
    {options.map((option, index) => {
      const isActive = activeIndex === index
      const isRolling = rollingIndex === index
      return (
        <div
          key={option}
          className={`relative overflow-hidden rounded-2xl border transition-all ${
            isActive
              ? 'border-blush-200 bg-gradient-to-br from-rose-100/90 via-fuchsia-100/90 to-sky-100/90 text-slate-900 shadow-[0_24px_45px_-26px_rgba(236,72,153,0.45)]'
              : 'border-white/20 bg-white/70 text-slate-700 shadow-[0_14px_32px_-28px_rgba(15,23,42,0.28)]'
          } ${isRolling ? 'scale-[1.02]' : ''}`}
        >
          <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(255,255,255,0.35),transparent_60%)] opacity-60" />
          <div className="relative flex flex-col gap-2 px-4 py-5">
            <span className={`text-xs uppercase tracking-[0.22em] ${isActive ? 'text-slate-600' : 'text-slate-500'}`}>选项 {index + 1}</span>
            <span className="text-lg font-semibold">{option}</span>
          </div>
        </div>
      )
    })}
  </div>
)

const RandomizerPage = () => {
  if (typeof document !== 'undefined') document.title = '灵感抽签 · Love Notes'
  const queryClient = useQueryClient()
  const { data: currentUser } = useCurrentUser()
  const [title, setTitle] = useState('今晚吃什么？')
  const [optionDraft, setOptionDraft] = useState('')
  const [options, setOptions] = useState(['火锅', '寿司', '烤肉', '简餐'])
  const [style, setStyle] = useState<'wheel' | 'dice'>('wheel')
  const [saveEnabled, setSaveEnabled] = useState(false)
  const [shareEnabled, setShareEnabled] = useState(false)
  const [selectedPreset, setSelectedPreset] = useState<ApiDecisionPreset | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [pendingResult, setPendingResult] = useState<ApiDecisionSpinResult | null>(null)
  const [spinResult, setSpinResult] = useState<ApiDecisionSpinResult | null>(null)
  const [wheelState, setWheelState] = useState<{ rotation: number; spinning: boolean; highlightIndex: number | null }>({
    rotation: 0,
    spinning: false,
    highlightIndex: null,
  })
  const [diceState, setDiceState] = useState<{ activeIndex: number | null; rollingIndex: number | null }>({
    activeIndex: null,
    rollingIndex: null,
  })
  const rollingIntervalRef = useRef<number | null>(null)
  const rollingTimeoutRef = useRef<number | null>(null)

  const { data: presetResponse, isLoading: presetsLoading } = useQuery({
    queryKey: ['decision-presets'],
    queryFn: () => DecisionAPI.list({ limit: 50 }),
  })

  const presets = presetResponse?.items ?? []

  const createMutation = useMutation({
    mutationFn: DecisionAPI.create,
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['decision-presets'] }),
  })

  const updateMutation = useMutation({
    mutationFn: ({ id, payload }: { id: number; payload: Partial<{ title: string; options: string[]; style: string; is_shared: boolean; color_seed?: string | null }> }) =>
      DecisionAPI.update(id, payload),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['decision-presets'] }),
  })

  const deleteMutation = useMutation({
    mutationFn: DecisionAPI.remove,
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['decision-presets'] }),
  })

  const clearRollingTimers = () => {
    if (rollingIntervalRef.current) {
      window.clearInterval(rollingIntervalRef.current)
      rollingIntervalRef.current = null
    }
    if (rollingTimeoutRef.current) {
      window.clearTimeout(rollingTimeoutRef.current)
      rollingTimeoutRef.current = null
    }
  }

  useEffect(() => () => clearRollingTimers(), [])

  const handleAddOption = () => {
    const added = optionDraft.trim()
    if (!added) return
    setOptions((prev) => {
      const next = sanitizeOptions([...prev, added])
      return next.slice(0, 8)
    })
    setOptionDraft('')
  }

  const handleRemoveOption = (value: string) => {
    setOptions((prev) => prev.filter((item) => item !== value))
  }

  const smartSetPreset = (preset: ApiDecisionPreset | null) => {
    setSelectedPreset(preset)
    if (preset) {
      setTitle(preset.title)
      setOptions(preset.options)
      setStyle(preset.style === 'dice' ? 'dice' : 'wheel')
      setSaveEnabled(true)
      setShareEnabled(Boolean(currentUser?.active_relationship_id) && preset.is_shared)
    } else {
      setSaveEnabled(false)
      setShareEnabled(false)
    }
  }

  const ensurePresetSynced = async (presetId: number, baseOptions: string[]) => {
    if (!selectedPreset) return
    const diffOptions =
      baseOptions.length !== selectedPreset.options.length ||
      baseOptions.some((item, index) => item !== (selectedPreset.options[index] ?? null))
    const diffTitle = title.trim() !== selectedPreset.title
    const diffStyle = style !== selectedPreset.style
    const diffShare = shareEnabled !== selectedPreset.is_shared
    if (diffOptions || diffTitle || diffStyle || diffShare) {
      const payload: any = {}
      if (diffOptions) payload.options = baseOptions
      if (diffTitle) payload.title = title.trim() || '我的灵感抽签'
      if (diffStyle) payload.style = style
      if (diffShare) payload.is_shared = shareEnabled
      await updateMutation.mutateAsync({ id: presetId, payload })
      smartSetPreset({
        ...selectedPreset,
        options: baseOptions,
        title: payload.title ?? selectedPreset.title,
        style: payload.style ?? selectedPreset.style,
        is_shared: payload.is_shared ?? selectedPreset.is_shared,
      })
    }
  }

  const animateWheel = (optionsBase: string[], index: number, onComplete?: () => void) => {
    const slice = 360 / optionsBase.length
    // 选中扇区中心（以数学 0°=右侧为基准），再减 90° 使“顶部”为基准
    const centerAngle = slice * index + slice / 2 - 90
    // 目标是让 (centerAngle + rotation) 恰好等于 -90°（顶部指针方向）
    const targetBearing = -90
    setWheelState((prev) => {
      const current = ((prev.rotation % 360) + 360) % 360
      const sum = centerAngle + current
      const raw = targetBearing - sum
      const need = ((raw % 360) + 360) % 360
      const spins = 6
      const delta = spins * 360 + need
      return { rotation: prev.rotation + delta, spinning: true, highlightIndex: null }
    })
    window.setTimeout(() => {
      setWheelState((prev) => ({ ...prev, spinning: false, highlightIndex: index }))
      onComplete?.()
    }, 3300)
  }

  const animateDice = (optionsBase: string[], index: number, onComplete?: () => void) => {
    clearRollingTimers()
    setDiceState({ activeIndex: null, rollingIndex: null })
    rollingIntervalRef.current = window.setInterval(() => {
      setDiceState((prev) => ({
        activeIndex: prev.activeIndex,
        rollingIndex: Math.floor(Math.random() * optionsBase.length),
      }))
    }, 120)
    rollingTimeoutRef.current = window.setTimeout(() => {
      clearRollingTimers()
      setDiceState({ activeIndex: index, rollingIndex: null })
      onComplete?.()
    }, 1500)
  }

  const handleSpin = async () => {
    setError(null)
    const normalized = sanitizeOptions(options).slice(0, 8)
    if (normalized.length < 2) {
      setError('请至少提供两个选项')
      return
    }
    if (normalized.length > 8) {
      setError('最多支持 8 个选项')
      return
    }

    if (style === 'wheel' && wheelState.spinning) return
    if (style === 'dice' && rollingIntervalRef.current) return

    setOptions(normalized)
    setSpinResult(null)
    setPendingResult(null)

    try {
      let presetId: number | null = selectedPreset?.id ?? null
      if (saveEnabled) {
        if (!presetId) {
          const created = await createMutation.mutateAsync({
            title: title.trim() || '我的灵感抽签',
            options: normalized,
            style,
            is_shared: shareEnabled,
          })
          presetId = created.id
          smartSetPreset(created)
        } else {
          await ensurePresetSynced(presetId, normalized)
        }
      }

      const result = presetId
        ? await DecisionAPI.spinSaved(presetId)
        : await DecisionAPI.quickSpin({ title, options: normalized, style })

      setSpinResult(null)
      setPendingResult(result)
      const complete = () => {
        setSpinResult(result)
        setPendingResult(null)
      }
      if (style === 'wheel') {
        animateWheel(normalized, result.selected_index, complete)
      } else {
        animateDice(normalized, result.selected_index, complete)
      }
      if (presetId) {
        await queryClient.invalidateQueries({ queryKey: ['decision-presets'] })
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : '抽取失败，请稍后再试')
    }
  }

  const handleDeletePreset = async (presetId: number) => {
    if (deleteMutation.isPending) return
    await deleteMutation.mutateAsync(presetId)
    if (selectedPreset?.id === presetId) {
      smartSetPreset(null)
    }
  }

  const sampleChips = ['火锅', '自助餐', '日式拉面', '烧烤', '奶茶', '甜品', '看电影', '居家小酌', '新衣风格', 'citywalk']
  const hasRelationship = Boolean(currentUser?.active_relationship_id)

  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow="Inspiration"
        title="灵感随机 · 今日怎么安排？"
        description="输入想做的事情或搭配项，旋转灵感转盘 / 掷骰子，交给命运挑选。支持保存常用组合，随时取用。"
      />

      <div className="grid gap-6 lg:grid-cols-[360px_1fr]">
        <section className="surface-card relative flex flex-col gap-4 p-6">
          <div>
            <label className="text-xs font-semibold uppercase tracking-[0.28em] text-slate-400">标题</label>
            <input
              value={title}
              onChange={(event) => setTitle(event.target.value)}
              placeholder="今晚吃什么？"
              className="mt-2 w-full rounded-2xl border border-white/20 bg-white/50 px-3 py-2 text-sm text-slate-700 focus:border-blush-300 focus:outline-none"
            />
          </div>

          <div>
            <label className="text-xs font-semibold uppercase tracking-[0.28em] text-slate-400">选项</label>
            <div className="mt-2 flex gap-2">
              <input
                value={optionDraft}
                onChange={(event) => setOptionDraft(event.target.value)}
                onKeyDown={(event) => {
                  if (event.key === 'Enter') {
                    event.preventDefault()
                    handleAddOption()
                  }
                }}
                placeholder="输入后按回车添加，如 日式咖喱"
                className="flex-1 rounded-2xl border border-white/20 bg-white/60 px-3 py-2 text-sm text-slate-700 focus:border-blush-300 focus:outline-none"
              />
              <Button type="button" size="sm" onClick={handleAddOption}>
                添加
              </Button>
            </div>
            <div className="mt-3 flex flex-wrap gap-2">
              {options.map((item) => (
                <span
                  key={item}
                  className="group inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/60 px-3 py-1 text-xs font-medium text-slate-700 backdrop-blur-sm"
                >
                  {item}
                  <button
                    onClick={() => handleRemoveOption(item)}
                    className="text-slate-400 transition group-hover:text-rose-500"
                    type="button"
                  >
                    ×
                  </button>
                </span>
              ))}
            </div>
            <div className="mt-4 flex flex-wrap gap-2 text-xs text-slate-500">
              {sampleChips.map((chip) => (
                <button
                  key={chip}
                  type="button"
                  className="rounded-full border border-white/20 bg-white/70 px-3 py-1 text-xs text-slate-600 transition hover:border-blush-300 hover:text-blush-500"
                  onClick={() => setOptions((prev) => sanitizeOptions([...prev, chip]).slice(0, 8))}
                >
                  {chip}
                </button>
              ))}
            </div>
          </div>

          <div className="grid gap-3 sm:grid-cols-2">
            <div className="rounded-2xl border border-white/15 bg-white/40 p-3">
              <div className="flex items-center justify-between gap-2">
                <span className="text-xs font-semibold text-slate-500">表现形式</span>
                <div className="flex gap-1 rounded-full bg-white/40 p-1">
                  <button
                    type="button"
                    onClick={() => setStyle('wheel')}
                    className={`rounded-full px-3 py-1 text-xs font-semibold transition ${
                      style === 'wheel' ? 'bg-gradient-to-r from-blush-500 to-indigo-500 text-white shadow-card' : 'text-slate-500'
                    }`}
                  >
                    转盘
                  </button>
                  <button
                    type="button"
                    onClick={() => setStyle('dice')}
                    className={`rounded-full px-3 py-1 text-xs font-semibold transition ${
                      style === 'dice' ? 'bg-gradient-to-r from-sky-500 to-violet-500 text-white shadow-card' : 'text-slate-500'
                    }`}
                  >
                    骰子
                  </button>
                </div>
              </div>
            </div>

            <div className="rounded-2xl border border-white/15 bg-white/40 p-3">
              <div className="flex flex-col gap-3">
                <label className="inline-flex items-center justify-between gap-2 text-xs font-semibold text-slate-500">
                  <span>保存到灵感库</span>
                  <input
                    type="checkbox"
                    checked={saveEnabled}
                    onChange={(event) => {
                      setSaveEnabled(event.target.checked)
                      if (!event.target.checked) {
                        smartSetPreset(null)
                      }
                    }}
                    className="h-4 w-4 rounded border-slate-300 text-blush-500 focus:ring-blush-400"
                  />
                </label>
                <label className={`inline-flex items-center justify-between gap-2 text-xs font-semibold ${hasRelationship ? 'text-slate-500' : 'text-slate-400'}`}>
                  <span>同步给伴侣</span>
                  <input
                    type="checkbox"
                    disabled={!hasRelationship}
                    checked={shareEnabled && hasRelationship}
                    onChange={(event) => setShareEnabled(event.target.checked)}
                    className="h-4 w-4 rounded border-slate-300 text-indigo-500 focus:ring-indigo-400 disabled:opacity-40"
                  />
                </label>
              </div>
            </div>
          </div>

          {error ? <p className="text-xs text-rose-500">{error}</p> : null}

          <div className="mt-2 flex justify-end">
            <Button size="md" onClick={handleSpin} disabled={createMutation.isPending || updateMutation.isPending}>
              {createMutation.isPending || updateMutation.isPending ? '准备中...' : '开始抽取'}
            </Button>
          </div>
        </section>

        <section className="glass-panel relative flex flex-col items-center justify-center gap-6 p-6">
          <div className="absolute inset-0 rounded-3xl bg-gradient-to-br from-white/5 via-white/0 to-white/10" />
          <h3 className="text-sm font-semibold text-white/90">{title || '我的灵感抽签'}</h3>
          {style === 'wheel' ? (
            <WheelSpinner
              options={options}
              rotation={wheelState.rotation}
              spinning={wheelState.spinning}
              highlightIndex={wheelState.highlightIndex}
            />
          ) : (
            <DiceBoard options={options} activeIndex={diceState.activeIndex} rollingIndex={diceState.rollingIndex} />
          )}
          {spinResult ? (
            <div className="relative w-full max-w-md rounded-2xl border border-white/30 bg-white/85 p-4 text-center text-sm text-slate-900 shadow-[0_18px_36px_-28px_rgba(15,23,42,0.32)] backdrop-blur-xl">
              <span className="text-xs uppercase tracking-[0.3em] text-slate-500">命运的选择</span>
              <p className="mt-2 text-2xl font-semibold text-slate-900">{spinResult.selected_value}</p>
              <p className="mt-1 text-xs text-slate-600">好好享受这个灵感瞬间吧 ✨</p>
            </div>
          ) : pendingResult ? (
            <p className="text-xs text-slate-600">命运正在转动，请稍候...</p>
          ) : (
            <p className="text-xs text-slate-500">输入选项后点击「开始抽取」，等待命运指针指向你们的安排。</p>
          )}
        </section>
      </div>

      <section className="glass-panel relative p-6">
        <div className="flex items-center justify-between">
          <h3 className="text-sm font-semibold text-white/90">灵感库</h3>
          {presetsLoading ? <span className="text-xs text-white/60">加载中...</span> : null}
        </div>
        <div className="mt-4 grid gap-4 lg:grid-cols-3">
          {presets.length === 0 ? (
            <div className="rounded-2xl border border-white/10 bg-white/5 px-4 py-6 text-center text-sm text-white/70">
              还没有保存的灵感转盘，开启一次并勾选「保存」，就能把常用的选择留存下来。
            </div>
          ) : (
            presets.map((preset) => (
              <div
                key={preset.id}
                className={`relative overflow-hidden rounded-2xl border p-5 transition ${
                  selectedPreset?.id === preset.id
                    ? 'border-blush-400 bg-gradient-to-br from-rose-500/40 via-indigo-500/30 to-sky-500/30 text-white shadow-[0_22px_50px_-28px_rgba(236,72,153,0.6)]'
                    : 'border-white/10 bg-white/5 text-white/80 hover:border-white/20'
                }`}
              >
                <div className="flex items-center justify-between gap-2">
                  <div>
                    <h4 className="text-base font-semibold text-white">{preset.title}</h4>
                    <p className="mt-1 text-xs text-white/60">
                      {preset.options.length} 个选项 · 已抽取 {preset.usage_count} 次
                    </p>
                  </div>
                  <div className="flex flex-col gap-2">
                    <Button
                      type="button"
                      size="sm"
                      variant="secondary"
                      className="px-2 py-1 text-[11px]"
                      onClick={() => smartSetPreset(preset)}
                    >
                      使用
                    </Button>
                    <Button
                      type="button"
                      size="sm"
                      variant="ghost"
                      className="px-2 py-1 text-[11px] text-rose-300 hover:text-rose-200"
                      onClick={() => handleDeletePreset(preset.id)}
                      disabled={deleteMutation.isPending}
                    >
                      删除
                    </Button>
                  </div>
                </div>
                {preset.last_result ? (
                  <div className="mt-4 rounded-xl border border-white/10 bg-white/10 px-4 py-3 text-xs text-white/80">
                    最近一次结果：<span className="font-semibold text-white">{preset.last_result}</span>
                  </div>
                ) : null}
              </div>
            ))
          )}
        </div>
      </section>
    </div>
  )
}

export default RandomizerPage
